<!DOCTYPE html>
<html>
<head>
    <script src="scripts/jquery-3.5.1.min.js"></script>
    <script src="scripts/jquery.transit.min.js"></script>
    <script src="scripts/jquery-cookie-1.4.1.min.js"></script>
    <script src="scripts/showdown.min.js"></script>
    <script src="scripts/jquery.lazyloadxt.min.js"></script>
    <script src="scripts/purify.min.js"></script>
    <script src="scripts/sha256.min.js"></script>
    <script src="scripts/cookie.js"></script>
    
    
    
    <script src="scripts/xss.js"></script>
    <script src="scripts/showdown-xss-filter.js"></script>
    
    
    <link id="base_theme" rel="stylesheet" type="text/css" href="css/templates.css">
    <link rel="stylesheet" href="css/bg_load.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <script type=module>
        //To DO:: 
        //2) Count tokens print fix 
        //6) Reload setting files when they was rewrite 
        //7) Show an indicator that shows the message in context or not
        //8) Сombine multiple messages into one if the text continues
        //10) Design presets
        //11) Fix sending propt with json additional symbols (kinda \\ and etc)
        //import {encode, decode} from "../scripts/gpt-2-3-tokenizer/mod.js";
        //let text = "hello world";
        //console.log(encode("dsfs").length); // [258, 18798, 995]
    </script>

    <script src="class/charaCloud.js"></script>
    <script type=module src="script.js"></script>

    <style>
        #characters_rooms_switch_button:hover {
            background-color: #fff1;
            transition: background-color 0.2s;
        }
    </style>
    
        
<title>Tavern.AI</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
    
    <div id="bg1"></div>
    <div id="bg2"></div>
    <div id="drag_drop_shadow"><img src="../img/import_big.png"></div>
    <div id="bg_chara_cloud"></div>
    <div id="reg_login_popup_shadow">
        <div id="reg_login_popup">
            <div class="form-container">

                <!-- Registration form -->
                <span id="reg_login_cross"><img src="img/cross.png" class="popup_cross"></span>

                <form id="registration_form" method="post">
                    <h2>User Registration</h2>
                    <label for="username">Username:</label><div class="form_error" id="username_error"></div>
                    <input type="text" id="reg_username" name="username" required>
                    
                    <label for="email" class="email" >Email:</label> <label class="optional">(optional)</label>
                    <input type="email" id="reg_email" name="email">
                    <div class="form_error" id="email_error"></div>
                    <label for="password">Password:</label><div class="form_error" id="reg_password_error"></div>
                    <input type="password" id="reg_password" name="password" minlength="8" maxlength="32" required>
                    <label for="confirm-password">Confirm Password:</label><div class="form_error" id="reg_confirm_password_error"></div>
                    <input type="password" id="reg_confirm_password" name="confirm_password" minlength="8" maxlength="32" required>
                    <input type="submit" class="submit_button" value="Register"><img class="load_icon" src="img/load.svg">
                    <div class="switch_log_reg">Switch to Login</div>
                    <br><div class="google-captcha-terms">This site is protected by reCAPTCHA and the Google
                        <a href="https://policies.google.com/privacy">Privacy Policy</a> and
                        <a href="https://policies.google.com/terms">Terms of Service</a> apply.
                    </div>
                </form>

                <!-- Login form -->
                <form id="login_form" method="post">
                    <h2>User Login</h2>
                    <label for="login_username">Username:</label><div class="form_error" id="login_username_error"></div>
                    <input type="text" id="login_username" name="login-username" required>
                    <label for="login_password">Password:</label>
                    <input type="password" id="login_password" name="login-password" minlength="8" maxlength="32" required>
                    <input type="submit" class="submit_button" value="Login"><img class="load_icon" src="img/load.svg">
                    <div class="switch_log_reg">Switch to Registration</div>
                </form>
                <div id="successful_registration">
                    <h2>Account created</h2>
                    <img src="./img/success.png">
                </div>
            </div>
        </div>
    </div>
    <div id="character_published_shadow" class="shadow_popup">
        <div id="character_published_popup" class="popup_large">
            
            <div class="form-container">
                
                <img id="character_published_popup_avatar" src="./img/fluffy.png">
                <!--<label>Alex</label>-->
                <h2 class="character_published_popup_title">Character Published</h2>
                <input type="submit" id="character_published_popup_button" class="submit_button" value="Go to Profile">
            </div>
        </div>
    </div>
    <div id="shadow_popup" class="shadow_popup">
        <div id="dialogue_popup">
            <div id="dialogue_popup_text"><h3>text</h3></div>
            <div id="dialogue_popup_ok" class="menu_button">Delete</div>
            <div id="dialogue_popup_cancel" class="menu_button">Cancel</div>
        </div>
    </div>
    <div id="colab_shadow_popup" class="shadow_popup">
        <div id="colab_popup">
            <div id="colab_popup_text"><h3>Initialization</h3></div>
        </div>
    </div>

    <div id="shadow_charedit_advanced_popup" class="shadow_popup through">
        <div class="container">
            <div class="header">
                <img class="icon" src="img/book2.png">
                <h3>Advanced edit</h3>
                <img class="cross" src="img/cross.png" title="Hide">
            </div>
            <div class="content">
                <h4 class="h4_menu_title person_summary">Personality summary</h4>
                <h5 class="h5_menu_help">A brief description of the personality (<a href="/notes/2" target="_blank">?</a>)</h5>
                <input id="personality_textarea" name="personality" placeholder="" form="form_create" class="text_pole chareditor-personality" type="text" maxlength="600" autocomplete="off">

                <h4 class="h4_menu_title">Scenario</h4>
                <h5 class="h5_menu_help">Circumstances and context of the dialogue (<a href="/notes/12" target="_blank">?</a>)</h5>
                <input id="scenario_pole" name="scenario" class="text_pole chareditor-scenario" type="text" maxlength="600" size="40" value="" autocomplete="off" form="form_create">

                <h4 class="h4_menu_title">Examples of dialogue</h4>
                <h5 class="h5_menu_help">Forms a personality more clearly (<a href="/notes/11" target="_blank">?</a>)</h5>
                <textarea id="mes_example_textarea" name="mes_example" placeholder="" class="chareditor-dialogue" form="form_create"></textarea>
            </div>
        </div>
    </div>


    <div id="master_settings_popup" class="popup_large">
            
        <div id="master_settings_popup_content">
            <div id="master_settings_head">
                <img id="master_settings_cross" class="popup_cross" src="img/cross.png">

                <div><img src="img/alchy.png" id="master_settings_logo"><h3 class="header_popup_text_h3">Master Settings</h3></div>
            </div>
            <div id="master_settings">

                <div id="master_settings_webui_block" class="master_settings_range_block">
                    <div id="top_p_block_webui">
                        <h4 class="range_title">Top P Sampling </h4><h5 id="top_p_counter_webui" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="top_p_webui" name="volume" min="0.0" max="1.0" step="0.01">
                    </div>
                    <div id="top_k_block_webui">
                        <h4 class="range_title">Top K Sampling </h4><h5 id="top_k_counter_webui" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="top_k_webui" name="volume" min="0" max="100" step="1">
                    </div>
                    <div id="top_a_block_webui">
                        <h4 class="range_title">Top A Sampling </h4><h5 id="top_a_counter_webui" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="top_a_webui" name="volume" min="0.0" max="1.0" step="0.01">
                    </div>
                    <div id="typical_block_webui">
                        <h4 class="range_title">Typical Sampling </h4><h5 id="typical_counter_webui" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="typical_webui" name="volume" min="0.0" max="1.0" step="0.01">
                    </div>
                    <div id="tfs_block_webui">
                        <h4 class="range_title">Tail Free Sampling </h4><h5 id="tfs_counter_webui" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="tfs_webui" name="volume" min="0.0" max="1.0" step="0.01">
                    </div>
                    <div id="rep_pen_size_block_webui">
                        <h4 class="range_title">Repetition Penalty Range</h4><h5 id="rep_pen_size_counter_webui" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="rep_pen_size_webui" name="volume" min="0" max="2048" step="32">
                    </div>
                    <div id="nrns_block_webui">
                        <h4 class="range_title">No Repeat Ngram Size</h4><h5 id="nrns_counter_webui" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="nrns_webui" name="volume" min="0" max="20" step="1">
                    </div>
                    <div id="amount_gen_block_webui">
                        <h4 class="range_title">Amount of generation </h4><h5 id="amount_gen_counter_webui" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="amount_gen_webui" name="volume" min="16" max="2048" step="16">
                    </div>
                    <div id="max_context_block_webui">
                        <div id="max_context_grid_webui">
                            <div id="max_context_label_webui">
                                <h4 class="range_title">Context Size</h4><h5 id="max_context_counter_webui" style="display: inline-block" class="range_counter">select</h5>
                                <div id="webui_set_context_size_button"><a>(set)</a></div>
                            </div>
                            <input id="lock_context_size_webui" style="display: none;" type="checkbox" class="toggle_lock">
                        </div>
                        <input type="range" class="range_bar" id="max_context_webui" name="volume" min="512" max="8192" step="32">
                    </div>
                </div>
                <div id="master_settings_koboldai_block" class="master_settings_range_block">
                    <div id="top_p_block">
                        <h4 class="range_title">Top P Sampling </h4><h5 id="top_p_counter" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="top_p" name="volume" min="0.0" max="1.0" step="0.01">
                    </div>
                    <div id="top_k_block">
                        <h4 class="range_title">Top K Sampling </h4><h5 id="top_k_counter" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="top_k" name="volume" min="0" max="100" step="1">
                    </div>
                    <div id="top_a_block">
                        <h4 class="range_title">Top A Sampling </h4><h5 id="top_a_counter" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="top_a" name="volume" min="0.0" max="1.0" step="0.01">
                    </div>
                    <div id="typical_block">
                        <h4 class="range_title">Typical Sampling </h4><h5 id="typical_counter" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="typical" name="volume" min="0.0" max="1.0" step="0.01">
                    </div>
                    <div id="tfs_block">
                        <h4 class="range_title">Tail Free Sampling </h4><h5 id="tfs_counter" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="tfs" name="volume" min="0.0" max="1.0" step="0.01">
                    </div>
                    <div id="rep_pen_size_block">
                        <h4 class="range_title">Repetition Penalty Range</h4><h5 id="rep_pen_size_counter" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="rep_pen_size" name="volume" min="0" max="4096" step="64">
                    </div>
                    <div id="rep_pen_slope_block">
                        <h4 class="range_title">Rep Pen Slope</h4><h5 id="rep_pen_slope_counter" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="rep_pen_slope" name="volume" min="0.1" max="1.0" step="0.01">
                    </div>
                    <div id="amount_gen_block">
                        <h4 class="range_title">Amount of generation </h4><h5 id="amount_gen_counter" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="amount_gen" name="volume" min="16" max="2048" step="16">
                    </div>
                    <div id="max_context_block">
                        <div id="max_context_grid">
                            <div id="max_context_label">
                                <h4 class="range_title">Context Size</h4><h5 id="max_context_counter" style="display: inline-block" class="range_counter">select</h5>
                                <div id="kobold_set_context_size_button"><a>(set)</a></div>
                            </div>
                            <input id="lock_context_size" type="checkbox" class="toggle_lock">
                        </div>
                        <input type="range" class="range_bar" id="max_context" name="volume" min="512" max="8192" step="128">
                    </div>
                </div>
                <div id="master_settings_novelai_block" class="master_settings_range_block">
                    <div>
                        <h4 class="range_title">Nucleus</h4><h5 id="top_p_counter_novel" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="top_p_novel" name="volume" min="0.0" max="1.0" step="0.01">
                    </div>
                    <div>
                        <h4 class="range_title">Top K Sampling</h4><h5 id="top_k_counter_novel" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="top_k_novel" name="volume" min="0" max="100" step="1">
                    </div>
                    <div>
                        <h4 class="range_title">Top A Sampling</h4><h5 id="top_a_counter_novel" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="top_a_novel" name="volume" min="0.0" max="1.0" step="0.01">
                    </div>
                    <div>
                        <h4 class="range_title">Typical Sampling </h4><h5 id="typical_counter_novel" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="typical_novel" name="volume" min="0.0" max="1.0" step="0.01">
                    </div>
                    <div>
                        <h4 class="range_title">Tail Free Sampling </h4><h5 id="tfs_counter_novel" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="tfs_novel" name="volume" min="0.0" max="1.0" step="0.01">
                    </div>
                    <div>
                        <h4 class="range_title">Repetition Penalty Range</h4><h5 id="rep_pen_size_counter_novel" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="rep_pen_size_novel" name="volume" min="0" max="2048" step="1">
                    </div>
                    <div>
                        <h4 class="range_title">Rep Pen Slope</h4><h5 id="rep_pen_slope_counter_novel" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="rep_pen_slope_novel" name="volume" min="0.1" max="10.0" step="0.01">
                    </div>
                    <div>
                        <h4 class="range_title">Amount of generation</h4><h5 id="amount_gen_counter_novel" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="amount_gen_novel" name="volume" min="16" max="2048" step="16">
                    </div>
                </div>
                <div id="master_settings_openai_block">
                    <div class="master_settings_range_block">
                        <div>
                        <h4 class="h4_menu_title">Frequency Penalty </h4><h5 id="freq_pen_counter_openai" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="freq_pen_openai" name="volume" min="0.0" max="2.0" step="0.01">
                        </div>
                        <div>
                        <h4 class="h4_menu_title">Presence Penalty</h4><h5 id="pres_pen_counter_openai" class="range_counter">select</h5>
                        <input type="range" class="range_bar" id="pres_pen_openai" name="volume" min="0.0" max="2.0" step="0.01">
                        </div>
                        <div>
                            <h4 class="h4_menu_title">Top P Sample</h4><h5 id="top_p_counter_openai" class="range_counter">select</h5>
                            <input type="range" class="range_bar" id="top_p_openai" name="volume" min="0.0" max="1.0" step="0.01">
                        </div>
                        <div>
                            <h4 class="range_title">Amount of generation </h4><h5 id="amount_gen_counter_openai" class="range_counter">select</h5>
                            <input type="range" class="range_bar" id="amount_gen_openai" name="volume" min="16" max="2048" step="16">
                        </div>
                        <div>
                            <div>
                                <h4 class="h4_menu_title">Context Size</h4><h5 id="max_context_counter_openai" style="display: inline-block" class="range_counter">select</h5>
                                <div id="proxy_set_context_size_button"><a>(set)</a></div>
                            </div>
                            <input type="range" class="range_bar" id="max_context_openai" name="volume" min="1024" max="4096" step="1">
                        </div>
                    </div>
                    
                </div>
                <div id="master_settings_claude_block">
                    <div class="master_settings_range_block">

                        <div>
                            <h4 class="h4_menu_title">Top P Sample</h4><h5 id="top_p_counter_claude" class="range_counter">select</h5>
                            <input type="range" class="range_bar" id="top_p_claude" name="volume" min="0.0" max="1.0" step="0.01">
                        </div>
                        <div>
                            <h4 class="h4_menu_title">Top K Sample</h4><h5 id="top_k_counter_claude" class="range_counter">select</h5>
                            <input type="range" class="range_bar" id="top_k_claude" name="volume" min="0" max="100" step="1">
                        </div>
                        <div>
                            <h4 class="range_title">Amount of generation </h4><h5 id="amount_gen_counter_claude" class="range_counter">select</h5>
                            <input type="range" class="range_bar" id="amount_gen_claude" name="volume" min="64" max="4096" step="64">
                        </div>
                        <div>
                            <div>
                                <h4 class="h4_menu_title">Context Size</h4><h5 id="max_context_counter_claude" style="display: inline-block" class="range_counter">select</h5>
                                <div id="claude_set_context_size_button"><a>(set)</a></div>
                            </div>
                            <input type="range" class="range_bar" id="max_context_claude" name="volume" min="1024" max="100000" step="1">
                        </div>

                    </div>
                    
                </div>
                <div id="master_settings_ollama_block" class="master_settings_range_block" style="display: none;">
                    <div>
                        <h4 class="range_title">Top P Sampling </h4><h5 id="top_p_counter_ollama" class="range_counter">1.0</h5>
                        <input type="range" class="range_bar" id="top_p_ollama" name="volume" min="0.0" max="1.0" step="0.01" value="1.0">
                    </div>
                    <div>
                        <h4 class="range_title">Top K Sampling </h4><h5 id="top_k_counter_ollama" class="range_counter">0</h5>
                        <input type="range" class="range_bar" id="top_k_ollama" name="volume" min="0" max="100" step="1" value="0">
                    </div>
                    <div>
                        <h4 class="range_title">Context Size</h4><h5 id="max_context_counter_ollama" style="display: inline-block" class="range_counter">4096 Tokens</h5>
                        <div id="ollama_set_context_size_button"><a>(set)</a></div>
                        <input type="range" class="range_bar" id="max_context_ollama" name="volume" min="512" max="8192" step="128" value="4096">
                    </div>
                    <!-- Add other Ollama-specific advanced parameters here if needed -->
                </div>
                <div id="system_prompt_block">
                    <div id="system_prompt">
                        <div style="display:grid;grid-template-columns: auto auto;position:relative;width:94%">
                            <div>
                            <h4 class="h4_menu_title">System prompt</h4>
                            <h5 class="h5_menu_help">Defines how the model will behave (<a href="/notes/20" target="_blank">?</a>)</h5>
                            <select id="system_prompt_preset_selector" class="menu_select">
                            </select>
                            <input id="system_prompt_new_button" type="submit" value="New preset">
                            <input id="system_prompt_delete_button" type="submit" value="Delete">
                            </div>
                            <div style="position:absolute; bottom: -20px; right:0">
                                <h5 id="system_depth_counter" class="range_counter">Depth</h5>
                                <input style="margin-right: unset;" type="range" class="range_bar" id="system_depth_range" name="volume" min="0" max="34" step="1">
                            </div>
                        </div>

                        <textarea id="system_prompt_textarea" placeholder=""></textarea>


                    </div>
                    <div style="display:grid;grid-template-columns: auto auto;position:relative;width:94%">
                        <div>
                        <h4 class="h4_menu_title">Jailbreak</h4>
                        <h5 class="h5_menu_help">Jailbreak helps to circumvent censorship restrictions (<a href="/notes/23" target="_blank">?</a>)</h5>
                        </div>
                        <div style="position:absolute; bottom: -20px; right:0">
                                <h5 id="jailbreak_depth_counter" class="range_counter">Depth 5</h5>
                                <input style="margin-right: unset;" type="range" class="range_bar" id="jailbreak_depth_range" name="volume" min="0" max="34" step="1">
                            </div>
                    </div>
                    <textarea id="jailbreak_prompt_textarea" placeholder=""></textarea>
                    <div>
                        <h4 class="h4_menu_title">User Jailbreak</h4>
                        <h5 class="h5_menu_help">An additional Jailbreak for circumventing censorship (<a href="/notes/24" target="_blank">?</a>)</h5>
                    </div>
                    <textarea id="user_jailbreak_prompt_textarea" placeholder=""></textarea>
                </div>
                <div id="master_settings_toggle_block">
                    <div class="menu_toggle" id="multigen_toggle">
                        <div class="toggle_label"><h4 class="h4_menu_title">Multigen</h4><h5 class="h5_menu_help">Information (<a href="/notes/14" target="_blank">?</a>)</h5></div>
                        <input id="multigen" type="checkbox" class="toggle_checkbox">
                    </div>

                    <div class="menu_toggle">
                        <div class="toggle_label"><h4 class="h4_menu_title">Swipes</h4><h5 class="h5_menu_help">Information (<a href="/notes/15" target="_blank">?</a>)</h5></div>
                        <input id="swipes" type="checkbox" class="toggle_checkbox">
                    </div>
                    <div class="menu_toggle">
                        <div class="toggle_label"><h4 class="h4_menu_title">Keep dialogue examples</h4><h5 class="h5_menu_help">Information (<a href="/notes/16" target="_blank">?</a>)</h5></div>
                        <input id="keep_dialog_examples" type="checkbox" class="toggle_checkbox">
                    </div>


                    <div class="menu_toggle">
                        <div class="toggle_label"><h4 class="h4_menu_title">Free name mode</h4><h5 class="h5_menu_help">Information (<a href="/notes/17" target="_blank">?</a>)</h5></div>
                        <input id="free_char_name_mode" type="checkbox" class="toggle_checkbox">
                    </div>

                    <div class="menu_toggle" id="singleline_toggle">
                        <div class="toggle_label"><h4 class="h4_menu_title">Singleline mode</h4><h5 class="h5_menu_help">Information (<a href="/notes/51" target="_blank">?</a>)</h5></div>
                        <input id="singleline" type="checkbox" class="toggle_checkbox">
                    </div>

                    <div class="menu_toggle" id="autoconnect_toggle">
                        <div class="toggle_label"><h4 class="h4_menu_title">Auto-connect</h4><h5 class="h5_menu_help">Attempt to connect to the last API on start</h5></div>
                        <input id="autoconnect" type="checkbox" class="toggle_checkbox">
                    </div>
                    <!-- <div class="menu_toggle" id="characloud_toggle"> -->
                        <!-- <div class="toggle_label"><h4 class="h4_menu_title">Autorun charaCloud</h4><h5 class="h5_menu_help">Autorun charaCloud on startup</h5></div> -->
                        <!-- <input id="characloud" type="checkbox" class="toggle_checkbox"> -->
                    <!-- </div> -->
                    <div class="menu_toggle" id="notes_toggle">
                        <div class="toggle_label"><h4 class="h4_menu_title" style="font-size: 0.95em;">Memory scroll</h4><h5 class="h5_menu_help">Information (<a href="/notes/21" target="_blank">?</a>)</h5></div>
                        <input id="notes_checkbox" type="checkbox" class="toggle_checkbox">
                    </div>

                </div>
                <div>
                    <h4 class="h4_menu_title">Pyg Formatting</h4><h5 class="h5_menu_help">Information (<a href="/notes/18" target="_blank">?</a>)</h5>
                    <select id="pyg_fmtg" class="menu_select">
                        <option value="0">Auto</option>
                        <option value="1">Enable for all models</option>
                        <option value="2">Disable for all models</option>
                    </select>
                    <h4 class="h4_menu_title">Anchors Order (Legacy)</h4><h5 class="h5_menu_help">Helps to increase the length of messages (<a href="/notes/9" target="_blank">?</a>)</h5>
                    <select id="anchor_order" class="menu_select">
                        <option value="0">Character Anchor - Style Anchor</option>
                        <option value="1">Style Anchor - Character Anchor</option>
                    </select>
                    <div id="anchor_checkbox" class="menu_checkbox">
                        <label class="checkbox">
                            <input id="character_anchor" type="checkbox"/><span></span>
                        </label><h4>Character Anchor</h4>
                        <label class="checkbox" >
                            <input id="style_anchor" type="checkbox"/><span></span>
                        </label><h4>Style Anchor</h4>
                    </div>
                </div>
            </div>
        </div>

       
            
    </div>
    <div id="shadow_select_chat_popup" class="shadow_popup">
        <div id="select_chat_popup">
            <div id="select_chat_popup_text">
                <img id="select_chat_cross" class="popup_cross" src="img/cross.png">


            </div>
            <div id="select_chat_import">
                
                <div id="chat_import_button"><a>+import</a>&nbsp;</div><div id="chat_import_button_help">(<a href="/notes/10" target="_blank">?</a>)</div>
                <form id="form_import_chat"  action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display: none;">
                    <input type="file" id="chat_import_file" accept=".json, .jsonl, .txt" name="avatar">
                    <input id="chat_import_file_type" name="file_type" class="text_pole" type="text" maxlength="999" size="2" value="" autocomplete="off">
                    <input id="chat_import_avatar_url" name="avatar_url" class="text_pole" type="text" maxlength="999" size="2" value="" autocomplete="off">
                    <input id="chat_import_character_name" name="character_name" class="text_pole" type="text" maxlength="999" size="2" value="" autocomplete="off">
                </form>
            </div>
            
            <div id="select_chat_div">
                
            </div>
            <div id="load_select_chat_div">
                <img src="../img/load.svg">
            </div>


        </div>
    </div>

    <div id="shadow_notes_popup" class="shadow_popup through">
        <div class="container" id="notes_popup">
            <div class="header">
                <img class="note_icon icon" src="img/notes_scroll.png">
                <div class="notes_token_stat"><span>0</span> tokens <h5 class="h5_menu_help"> (<a href="/notes/21" target="_blank">?</a>)</h5></div>
                <label for="notes_wpp_checkbox" class="wpp_label" id="notes_wpp_label" title="W++ is an attribute-based shorthand format used in KoboldAI">W++<br>Editor</label>
                <input id="notes_wpp_checkbox" type="checkbox" class="toggle_checkbox wpp-checkbox">
                <img class="cross" src="img/cross.png" title="Hide">
            </div>
            <div class="content">
                <textarea id="notes_textarea"></textarea>
                <div id="notes_wpp_editor" class="wpp-editor wpp-editor"></div>
            </div>
            <div class="footer">
                <select id="notes_strategy" class="notes_strategy">
                    <option value="discr" title="Inject all notes as single line after character's description">Add to description</option>
                    <option value="none" title="Do not add notes to request">Don't add</option>
                </select>
            </div>
        </div>
    </div>
    <div id="shadow_worldinfo_popup" class="shadow_popup through">
        <div class="container world_info" id="world_info">
            <div class="header">
                <img class="note_icon icon" src="img/world.png" title="World info">
                <select class="worldinfo_name" title="Select world"></select>
                <button title="Delete world" class="inline delete" disabled="disabled"><img src="img/del_mes.png"></button>
                <button title="Create new world" class="inline create"><img src="img/save_and_start_new_chat.png"></button>
                <img class="cross" src="img/cross.png" title="Hide">
            </div>
            <div class="content">
            </div>
        </div>
    </div>
    <div id="shadow_worldinfo_details_popup" class="shadow_popup through">
        <div class="container world_info world_info_details">
            <div class="header">
                <img class="note_icon icon" src="img/world.png">
                <div class="notes_token_stat"><span>0</span> tokens <h5 class="h5_menu_help"> (<a href="/notes/22" target="_blank">?</a>)</h5></div>
                <label class="wpp_label" title="W++ is an attribute-based shorthand format used in KoboldAI">W++<br>Editor</label>
                <input type="checkbox" class="toggle_checkbox wpp-checkbox" checked="checked">
                <img class="cross" src="img/cross.png" title="Hide">
            </div>
            <div class="content">
                <div class="keys-editor" title="Keys (tags)"></div>
                <div class="secondary-keys-editor" title="Secondary keys"></div>
                <textarea></textarea>
                <div class="wpp-editor-field"></div>
            </div>
            <div class="footer">
                <label class="comment-label">Comment: </label><input type="text" class="comment" title="Optional comment to help you organize entries">
                <label>Constant</label><input type="checkbox" class="toggle_checkbox constant" title="Always add this entry, even when it's not mentioned">
                <label>Selective</label><input type="checkbox" class="toggle_checkbox selective" title="This entry will only be added if the message has both a main key, and a secondary key">
                <label>Prepend</label><input type="checkbox" class="toggle_checkbox prepend" title="When including, place this entry before character definition">
            </div>
        </div>
    </div>

    <div id="bg_menu">
        
        <div id="logo_block"><div id="bg_menu_button"><img src="img/tri.png"></div><img src="img/logo.png" id="site_logo"></div>
        <div id="bg_menu_content">
            <div id="style_menu">
            </div>
            <form id="form_bg_download"  action="javascript:void(null);" method="post" enctype="multipart/form-data">
                <label class="input-file">
                <input type="file" id="add_bg_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/webp">
                <span class="bg_example_but_load" ><img src='img/addbg3.png'></span>           
   
                </label>
            </form>
            
        </div>  
    </div>
    <input type="checkbox" id="nav-toggle" hidden>

    <nav class="nav">
        <label for="nav-toggle" class="nav-toggle" onclick></label>

        
        <div class="right_menu_title_button" id="rm_button_characters"><h2>Characters</h2></div>
        <div class="right_menu_title_button" id="rm_button_settings"><h2>Settings</h2></div>
        <div class="right_menu_title_button" id="rm_button_selected_ch"><h2></h2></div>

        <div id="rm_ch_create_block" class="right_menu">
            <!--<div id="rm_button_back" class="right_menu_title_button"><h2>&#8656;</h2></div>-->
            
            <form id="form_create" class="chareditor" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                <button class="chareditor-button-close" title="Back">&#8656;</button>

                
                <div>
                    <div class="chareditor-token-warning-count">Warning: character definition exceeds <span></span> tokens!</div>
                    <div class="chareditor-token-warning-left">Warning: <span></span> tokens will be left for conversation!</div>
                </div>
                <div style="float: right; display: inline-block; opacity: 0.2;">(<div class="chareditor-token-counter" title="Number of tokens necessary for the character. If two values are shown, the higher value includes conversation examples, which are dynamically left out as actual conversation grows."></div>)</div>
                <div id="name_div" class="chareditor-name-block">
                    <h4 class="h4_menu_title">Name</h4><h5 class="h5_menu_help">Character name</h5>
                <input id="character_name_pole" name="ch_name" class="text_pole chareditor-name-input" type="text" maxlength="120" size="35" value="" autocomplete="off">
                </div>
                
                <div id="room_character_select_div" class="room-character-select-div" style="display: none;">
                    <h4 class="h4_menu_title">Characters</h4>
                    <br>
                    <div class="room-character-selected-items-div">
                        <h5 class="h5_menu_help">Characters selected</h5>
                        <div id="room_character_selected_items" class="room-character-selected-items text_pole" style="min-height: 5em; display: flex; flex-wrap: wrap;">
                            
                        </div>
                    </div>
                    <br>
                    <button type="button" class="chareditor-button-room-add-character" id="room_select_more_chars_button" style="display: none;">Add More Characters</button>
                    <div class="room-character-select-items-div">
                        <h5 class="h5_menu_help">Characters available</h5>
                        <div id="room_character_select_items" class="room-character-select-items text_pole" style="display: flex; flex-wrap: wrap;">
                            
                        </div>
                    </div>
                </div>

                <div id="avatar_div" class="avatar_div">
                    
                    <div id="avatar_div_container" class="avatar"><img src="img/fluffy.png" alt="avatar" class="chareditor-avatar-preview"></div><input type="file" id="add_avatar_button" class="chareditor-avatar" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/webp">
                    
                    <div>
                        <div class="chareditor-avatar-filename"></div> 
                    </div>
                    <input name="filename" type="hidden" autocomplete="off" class="chareditor-avatar-filename-input">
                </div>

                <div id="description_div">
                    <input id="description_wpp_checkbox" type="checkbox" class="toggle_checkbox"><label for="description_wpp_checkbox" id="description_wpp_label" class="wpp_label" title="W++ is an attribute-based shorthand format used in KoboldAI">W++<br>Editor</label>
                    <h4 class="h4_menu_title">Description</h4><h5 class="h5_menu_help">Personality and other characteristics (<a href="/notes/1" target="_blank">?</a>)</h5>
                    <textarea class="chareditor-description-text" name="description" placeholder=""></textarea>
                </div>

                <div>
                    <h4 class="h4_menu_title">First message</h4><h5 class="h5_menu_help">First message from the character (<a href="/notes/3" target="_blank">?</a>)</h5>
                    <textarea id="firstmessage_textarea" name="first_mes" class="chareditor-firstmessage-text" placeholder=""></textarea>
                </div>

                <div id="room_scenario_div" style="display: none;">
                    <h4 class="h4_menu_title">Scenario</h4>
                    <h5 class="h5_menu_help">Circumstances and context of the room (<a href="/notes/12" target="_blank">?</a>)</h5>
                    <!-- <input id="room_scenario" name="room_scenario" class="text_pole room-scenario" type="text" maxlength="9999" size="40" value="" autocomplete="off"> -->
                    <textarea id="room_scenario" name="room_scenario" class="text_pole room-scenario" autocomplete="off" rows="5"></textarea>
                </div>

                <input id="selected_chat_pole" name="chat" class="text_pole" type="hidden" maxlength="999" size="2" value="" autocomplete="off">
                <input name="create_date" class="text_pole" type="hidden" maxlength="999" size="2" value="" autocomplete="off">
                <input id="character_advanced_button" class="chareditor-button-advanced" type="button" value="Advanced Edit">

                <input id="character_online_editor" type="button" value="🢀 Online editor" class="chareditor-button-online">

                <div id="create_button_div">
                    <button class="chareditor-button-delete">Delete</button>
                    <input id="create_button" class="chareditor-button-submit" type="submit" value="Create">
                    <button class="chareditor-button-export">Export</button>
                </div>
                
            </form>
        </div>
        <div id="rm_api_block" class="right_menu" >
            
            <h3 id="title_api">API</h3>
            <select id="main_api">
                <option value="kobold">KoboldAI</option>
                <option value="horde">Kobold Horde</option>
                <option value="novel">NovelAI</option>
                <option value="openai">OpenAI</option>
                <option value="claude">ClaudeAI</option>
                <option value="proxy">Reverse Proxy</option>
                <option value="webui">Text generation web UI</option>
                <option value="ollama">Ollama</option>
            </select>
            <div id="kobold_api">
                <div id="kobold_api_logo"><a href="https://github.com/henk717/KoboldAI" target="_blank"><img src="img/kobold.png"></a></div>
                <form  action="javascript:void(null);" method="post" enctype="multipart/form-data">

                <h4 class="h4_menu_title">API url</h4><h5 class="h5_menu_help">Example: http://127.0.0.1:5000/api </h5>
                <input id="api_url_text" name="api_url" class="text_pole" type="text" maxlength="500" size="35" value="" autocomplete="off">
                <input id="api_button" type="submit" value="Connect">
                <img id="api_loading" src="img/load.svg" >
                </form>
                <div id="online_status2">
                    <div id="online_status_indicator2" class="online_status_indicator_offline"></div><div id="online_status_text2">No connection...</div>
                </div>
                <h4 class="h4_menu_title">Preset settings</h4><h5 class="h5_menu_help">Selecting settings (<a href="/notes/4" target="_blank">?</a>)</h5>
                <select id="settings_perset" class="menu_select">
                    <option value="gui">GUI KoboldAI Settings</option>
                </select>
                
                <div id="range_block">
                    <h4 class="h4_menu_title">Temperature </h4><h5 id="temp_counter" class="range_counter">select</h5>
                    <input type="range" id="temp" name="volume" min="0.1" max="2.0" step="0.01">
                    <!--<h4>Amount generation </h4><h5 id="amount_gen_counter">select</h5>
                    <input type="range" id="amount_gen" name="volume" min="16" max="512" step="1">-->
                    <h4 class="h4_menu_title">Repetition Penalty </h4><h5 id="rep_pen_counter" class="range_counter">select</h5>
                    <input type="range" id="rep_pen" name="volume" min="1" max="1.5" step="0.01">
                </div>
            </div>
            
            <!-- HORDE -->
            <div id="horde_api" style="position: relative;">
                <form  action="javascript:void(null);" method="post" enctype="multipart/form-data">
                    <h4 class="h4_menu_title">Horde API Key</h4><h5 class="h5_menu_help">Leave blank for guest account. <a href="notes/31.html" target="_blank">How does it work?</a></h5>
                    <!--<h5>Register at: <a href="https://horde.koboldai.net/register" target="_blank">https://horde.koboldai.net/register</a></h5>-->
                    <input type="password" id="horde_api_key" name="horde_api_key" class="text_pole" maxlength="500" size="35" placeholder="0000000000" autocomplete="off">
                    <input id="api_button_horde" type="submit" value="Connect">
                    <img id="api_loading_horde" src="img/load.svg" >
                    <div id="online_status_horde">
                        <div id="online_status_indicator_horde"></div><div id="online_status_text_horde">No connection...</div>
                    </div>


                    <h4 class="h4_menu_title">Models</h4>
                    <select id="horde_model_select" class="menu_select">
                        <option value="" selected>-- Connect to Horde for models --</option>
                    </select>


                </form>
            </div>
            <div id="novel_api">
                <div id="novel_api_logo"><a href="https://novelai.net/" target="_blank"><img src="img/novelai.png"></a></div>
                <form  action="javascript:void(null);" method="post" enctype="multipart/form-data">

                    <h4 class="h4_menu_title">API key</h4><h5 class="h5_menu_help">Where to get (<a href="/notes/6" target="_blank">?</a>)</h5>
                    <input id="api_key_novel" name="api_key_novel" class="text_pole" type="text" maxlength="500" size="35" value="" autocomplete="off">
                    <input id="api_button_novel" type="submit" value="Connect">
                    <img id="api_loading_novel" src="img/load.svg" >
                </form>
                <div id="online_status3">
                    <div id="online_status_indicator3" class="online_status_indicator_offline"></div><div id="online_status_text3">No connection...</div>
                </div>
                <h4 class="h4_menu_title">Model</h4><h5 class="h5_menu_help">Selecting NovelAI model (<a href="/notes/8" target="_blank">?</a>)</h5>
                <select id="model_novel_select" class="menu_select">
                    <option value="euterpe-v2">Euterpe</option>
                    <option value="krake-v2">Krake</option>
                    <option value="clio-v1">Clio</option>
                    <option value="kayra-v1">Kayra</option>
                </select>
                <h4 class="h4_menu_title">Preset settings</h4><h5 class="h5_menu_help">Selecting settings (<a href="/notes/7" target="_blank">?</a>)</h5>
                <select id="settings_perset_novel" class="menu_select">
                    <option value="gui">Default</option>
                </select>
                <div id="range_block_novel">
                    <h4 class="h4_menu_title">Randomness </h4><h5 id="temp_counter_novel" class="range_counter">select</h5>
                    <input type="range" id="temp_novel" name="volume" min="0.1" max="2.5" step="0.01">
                    <!--<h4>Amount generation </h4><h5 id="amount_gen_counter">select</h5>
                    <input type="range" id="amount_gen" name="volume" min="16" max="512" step="1">-->
                    <h4 class="h4_menu_title">Repetition Penalty </h4><h5 id="rep_pen_counter_novel" class="range_counter">select</h5>
                    <input type="range" id="rep_pen_novel" name="volume" min="1" max="2.0" step="0.01">
                </div>
            </div>
            <div id="openai_api">
                <div id="openai_api_logo"><a href="https://openai.com" target="_blank"><img src="img/openai.png"></a></div>
                <form  action="javascript:void(null);" method="post" enctype="multipart/form-data" id="openai_auth">
                    <h4 class="h4_menu_title" id="openai_api_h4_title">API address and password</h4><h5 class="h5_menu_help">Where to get (<a href="/notes/19" target="_blank">?</a>)</h5>
                    <div id="openai_proxy_adress_block">
                        <input id="api_url_openai" name="api_url_openai" class="text_pole" value="" placeholder="API Proxy url adress" type="text" maxlength="500" size="35" autocomplete="off">
                        <img src="../img/revert.png" id="default_openai_url_button">
                        <br>
                    </div>
                    <input id="api_key_openai" name="api_key_openai" class="text_pole" maxlength="500" size="35" value="" autocomplete="off" placeholder="API key or Prpxy password">
                    <input id="api_button_openai" type="submit" value="Connect">
                    <img id="api_loading_openai" src="img/load.svg" >
                </form>
                <div id="online_status4">
                    <div id="online_status_indicator4" class="online_status_indicator_offline"></div><div id="online_status_text4">No connection...</div>
                </div>
                <div>
                <h4 class="h4_menu_title">Model</h4><h5 class="h5_menu_help" id="h5_model_openai_help">OpenAI models (<a href="/notes/13" target="_blank">?</a>)</h5>
                    <select id="model_openai_select" class="menu_select">

                        <option value="gpt-5">gpt-5</option>
                        <option value="gpt-5-chat-latest">gpt-5-chat-latest</option>
                        <option value="gpt-5-mini">gpt-5-mini</option>
                        <option value="gpt-5-nano">gpt-5-nano</option>
                        <option value="gpt-4.1">gpt-4.1</option>
                        <option value="gpt-4o">gpt-4o</option>
                        <option value="chatgpt-4o-latest">chatgpt-4o-latest</option>
                        <option value="gpt-4o-2024-11-20">gpt-4o-2024-11-20</option>
                        <option value="gpt-4o-2024-08-06">gpt-4o-2024-08-06</option>
                        <option value="gpt-4o-2024-05-13">gpt-4o-2024-05-13</option>
                        <option value="chatgpt-4o-latest">chatgpt-4o-latest</option>
                        <option value="gpt-4o-mini">gpt-4o-mini</option>
                        <option value="gpt-4o-mini-2024-07-18">gpt-4o-mini-2024-07-18</option>
                        <option value="gpt-4">gpt-4</option>
                        <option value="gpt-4-32k">gpt-4-32k</option>
                        <option value="gpt-4-32k-0613">gpt-4-32k-0613</option>
                        <option value="gpt-4-turbo">gpt-4-turbo</option>
                        <option value="gpt-4-turbo-2024-04-09">gpt-4-turbo-2024-04-09</option>
                        <option value="gpt-4-0125-preview">gpt-4-0125-preview</option>
                        <option value="gpt-4-1106-preview">gpt-4-1106-preview</option>
                        <option value="gpt-4-vision-preview">gpt-4-vision-preview</option>
                        <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
                        <option value="gpt-3.5-turbo-0301">gpt-3.5-turbo-0301</option>
                        <option value="gpt-3.5-turbo-16k">gpt-3.5-turbo-16k</option>
                        <option value="gpt-3.5-turbo-16k-0613">gpt-3.5-turbo-16k-0613</option>
                        <option value="gpt-3.5-turbo-instruct">gpt-3.5-turbo-instruct</option>
                        <option value="text-davinci-003">text-davinci-003</option>
                        <option value="text-davinci-002">text-davinci-002</option>
                        <option value="text-curie-001">text-curie-001</option>
                        <option value="text-babbage-001">text-babbage-001</option>
                        <option value="text-ada-001">text-ada-001</option>
                        <option value="code-davinci-002">code-davinci-002</option>
                    </select>
                </div>
                <div style="margin-bottom: 5px;">
                    <h4 id="h4_menu_title_custom_proxy_model" class="h4_menu_title">Custom proxy model</h4><h5 class="h5_menu_help" id="h5_model_openai_help">How to use? (<a href="/notes/25" target="_blank">?</a>)</h5>
                    <input id="custom_proxy_model" name="custom_proxy_model" class="text_pole" value="" placeholder="Custom model" type="text" maxlength="500" size="35" autocomplete="off">
                </div>
                <div id="range_block_openai">
                    <h4 class="h4_menu_title">Temperature </h4><h5 id="temp_counter_openai" class="range_counter">select</h5>
                    <input type="range" id="temp_openai" name="volume" min="0" max="2.0" step="0.01">
                </div>
            </div>
            <div id="claude_api">
                <div id="claude_api_logo"><a href="https://claude.ai" target="_blank"><img src="img/claude.png"></a></div>
                <form  action="javascript:void(null);" method="post" enctype="multipart/form-data" id="claude_auth">
                    <h4 class="h4_menu_title" id="claude_api_h4_title">API Key</h4><h5 class="h5_menu_help">Where to get (<a href="https://claude.ai" target="_blank">?</a>)</h5>
                    <input id="api_key_claude" name="api_key_claude" class="text_pole" maxlength="500" size="35" value="" autocomplete="off" placeholder="API key">
                    <input id="api_button_claude" type="submit" value="Connect">
                    <img id="api_loading_claude" src="img/load.svg" >
                </form>
                <div id="online_status_claude">
                    <div id="online_status_indicator_claude" class="online_status_indicator_offline"></div><div id="online_status_text_claude">No connection...</div>
                </div>
                <div>
                <h4 class="h4_menu_title">Model</h4><h5 class="h5_menu_help" id="h5_model_openai_help">OpenAI models (<a href="/notes/13" target="_blank">?</a>)</h5>
                    <select id="model_claude_select" class="menu_select">
                        <option value="claude-opus-4-1-20250805">claude-opus-4-1-20250805</option>
                        <option value="claude-opus-4-20250514">claude-opus-4-20250514</option>
                        <option value="claude-sonnet-4-20250514">claude-sonnet-4-20250514</option>
                        <option value="claude-3-7-sonnet-20250219">claude-3-7-sonnet-20250219</option>
                        <option value="claude-3-5-haiku-20241022">claude-3-5-haiku-20241022</option>
                        <option value="claude-3-haiku-20240307">claude-3-haiku-20240307</option>
                    </select>
                </div>
                <div id="range_block_claude">
                    <h4 class="h4_menu_title">Temperature </h4><h5 id="temp_counter_claude" class="range_counter">select</h5>
                    <input type="range" id="temp_claude" name="volume" min="0" max="1.0" step="0.01">
                </div>
            </div>
            <div id="webui_api">
                
                <form  action="javascript:void(null);" method="post" enctype="multipart/form-data">

                    <h4 class="h4_menu_title">API url</h4><h5 class="h5_menu_help">Example: http://127.0.0.1:5000 </h5>
                    <input id="api_url_text_webui" name="api_url_webui" class="text_pole" type="text" maxlength="500" size="35" value="http://127.0.0.1:5000" autocomplete="off">
                    <input id="api_button_webui" type="submit" value="Connect">
                    <img id="api_loading_webui" src="img/load.svg" >
                </form>
                <div id="online_status_webui">
                    <div id="online_status_indicator_webui" class="online_status_indicator_offline"></div><div id="online_status_text_webui">No connection...</div>
                </div>
                <h4 class="h4_menu_title">Preset settings</h4><h5 class="h5_menu_help">Selecting settings (<a href="/notes/4_1" target="_blank">?</a>)</h5>
                <select id="settings_perset_webui" class="menu_select">
                </select>
                <div id="range_block_webui">
                    <h4 class="h4_menu_title">Temperature </h4><h5 id="temp_counter_webui" class="range_counter">select</h5>
                    <input type="range" id="temp_webui" name="volume" min="0.1" max="2.0" step="0.01">
                    <!--<h4>Amount generation </h4><h5 id="amount_gen_counter">select</h5>
                    <input type="range" id="amount_gen" name="volume" min="16" max="512" step="1">-->
                    <h4 class="h4_menu_title">Repetition Penalty </h4><h5 id="rep_pen_counter_webui" class="range_counter">select</h5>
                    <input type="range" id="rep_pen_webui" name="volume" min="1" max="1.5" step="0.01">
                </div>
            </div>
            <div id="ollama_api" style="display: none;">
                <!-- <div id="ollama_api_logo"><a href="https://ollama.ai/" target="_blank"><img src="img/ollama.png"></a></div> -->
                <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
                    <h4 class="h4_menu_title">API URL</h4><h5 class="h5_menu_help">Example: http://127.0.0.1:11434</h5>
                    <input id="api_url_ollama" name="api_url_ollama" class="text_pole" type="text" maxlength="500" size="35" value="http://127.0.0.1:11434" autocomplete="off">
                    <input id="api_button_ollama" type="submit" value="Connect">
                    <img id="api_loading_ollama" src="img/load.svg" style="display: none;">
                </form>
                <div id="online_status_ollama">
                    <div id="online_status_indicator_ollama" class="online_status_indicator_offline"></div><div id="online_status_text_ollama">No connection...</div>
                </div>
                <h4 class="h4_menu_title">Model</h4><h5 class="h5_menu_help">Select Ollama model (auto-populated)</h5>
                <select id="ollama_model_select" class="menu_select">
                    <option value="">-- Connect to get models --</option>
                </select>
                <div id="range_block_ollama">
                    <h4 class="h4_menu_title">Temperature </h4><h5 id="temp_counter_ollama" class="range_counter">0.7</h5>
                    <input type="range" id="temp_ollama" name="volume" min="0.0" max="2.0" step="0.01" value="0.7">
                    <h4 class="h4_menu_title">Amount of generation </h4><h5 id="amount_gen_counter_ollama" class="range_counter">400 Tokens</h5>
                    <input type="range" id="amount_gen_ollama" name="volume" min="16" max="2048" step="16" value="400">
                </div>
            </div>
            <div id="additional_menu_settings">
                <div id="world_info_settings">
                    <h4 class="h4_menu_title" style="margin-top: 22px;">World info</h4><h5 class="h5_menu_help">Select world info (<a href="/notes/22" target="_blank">?</a>)</h5>
                    <select id="worldinfo_select" class="menu_select">
                        <option value="none">None</option>
                    </select><button class="inline double" id="option_toggle_worldinfo">Editor</button>
                    <button class="inline double worldinfo-import" id="worldinfo-import">&nbsp;</button>

                    <form action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display: none;">
                        <input type="file" id="world_import_file" accept=".json" name="avatar">
                        <input name="filename" type="hidden" autocomplete="off">
                    </form>

                    <h5 class="h5_menu_help">Evaluation depth</h5>
                    <input type="number" id="input_worldinfo_depth" min="1" step="1" title="How many latest chat messages will be evaluated for World Info">
                    <h5 class="h5_menu_help">Token budget</h5>
                    <input type="number" id="input_worldinfo_budget" min="1" step="1" value="100" title="How many tokens at maximum will be used for World Info">
                </div>

                <input id="master_settings_button" type="button" value="✧ Master Settings ✧">
                <hr>

                <h4 id="title_your_avatar" class="h4_menu_title" >Your Avatar</h4> <span id="your_avatar_add_button"> <a>Add</a></span>
                <form id='form_add_user_avatar' style="display: none" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                    <input type="file" id="user_avatar_add_file" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/webp" name="avatar">
                </form>
                <div id="user_avatar_block"></div>
                <form id='form_change_name' action="javascript:void(null);" method="post" enctype="multipart/form-data">
                    <h4 class="h4_menu_title">Name</h4>
                    <input id="your_name" name="your_name" class="text_pole" type="text" maxlength="35" size="16" value="" autocomplete="off">
                    <input id="your_name_button" type="submit" value="Change">
                </form>
            </div>
            
        </div>
        <div id="rm_charaters_block" class="right_menu">

            <div id="characters_rooms_switch_button_div"><button id="characters_rooms_switch_button" type="submit" class="chareditor-button-online"><span id='characters_rooms_switch_button_characters_text'>Characters</span>/<span id='characters_rooms_switch_button_rooms_text'>Rooms</span></button></div>
            <div id="character_list">
                <div id="rm_button_create" class="right_menu_title_button"><h2>+New Character</h2></div>
                <div id="rm_button_import" class="right_menu_title_button"><h2>
                    <label id="character-button-import" class="right_menu">+Import
                        <form id="form_import"  action="javascript:void(null);" method="post" enctype="multipart/form-data">
                            <input type="file" id="character_import_file" accept=".json, image/png, image/webp" name="avatar" multiple="true">
                            <input id="character_import_file_type" name="file_type" class="text_pole" type="text" maxlength="999" size="2" value="" autocomplete="off">
                        </form>
                    </label>
                </h2></div>
                <div id="character-button-new-folder" class="right_menu_title_button"><h2>+New Folder</h2></div>
                <div>
                    <input id="rm_search_bar" name="rm_search_bar" class="text_pole" type="text" size="35" value="" autocomplete="off" placeholder="search...">
                    <select id="rm_folder_order" title="Sorting order">
                    </select>
                    
                </div>
                <ul id="rm_print_charaters_block"></ul>
            </div>
            <div id="room_list" style="display: none;">
                <div id="rm_button_create_room" class="right_menu_title_button"><h2>+Create Room</h2></div>
                <ul id="rm_print_rooms_block" class="folder" style="list-style: none; padding-left: 0;"></ul>
            </div>
        </div>
        <div id="rm_info_block" class="right_menu">
            <div id="rm_info_panel">
            <div id="rm_info_avatar"></div>
            <div id="rm_info_text"></div>
            <div id="rm_info_button">Back</div>
            </div>
        </div>
    </nav>
    <div id="shell">
        <div id="chat_header">
            <div id="chat_header_content">
                <div id="chat_header_back_button" style="display: none">
                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.77 3.77L16 2 6 12l10 10 1.77-1.77L9.54 12z"></path>
                </svg>
                </div>
                <div id="chat_header_char_name"></div>
                <div id="chat_header_char_info">Welcome to TavernAI!</div>
            </div>
            <div id="chat_story_button">
                <span id="chat_story_button_chat_text">Chat</span>/<span id="chat_story_button_story_text">Story</span>
            </div>
        </div>
        <div id="chat"></div>
        <div id="story">
            <textarea id="story_textarea" placeholder="Story text..."></textarea>
        </div>
        <div id="form_shell">
            
            <div id="dialogue_del_mes">
                <div id="dialogue_del_mes_text"><h3></h3></div>
                <div id="dialogue_del_mes_ok" class="menu_button">Delete</div>
                <div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div>
            </div>
            <form id="send_form">
                
                <div id="options_button">
                    <div id="options">
                        <div class="options-content">
                        <a id="option_start_new_chat"><img src="img/save_and_start_new_chat.png">Start new chat</a>
                        <a id="option_select_chat"><img id="option_select_chat_logo" src="img/book6.png">Chats book</a>
                        <a id="option_toggle_notes" class="option_toggle_notes"><img src="img/notes_scroll.png">Memory scroll</a>
                        
                        <hr>
                        <a id="option_delete_mes"><img src="img/del_mes.png">Delete message</a>
                        <a id="option_regenerate"><img src="img/regenerate.png">Regenerate</a>
                        </div>
                    </div>
                </div>
                <div id="ai_image_picker">
                    <img id="ai-select-image" src="img/ai_image_load.png">
                    <img id="ai-image-selected" src="img/ai_image_load_selected.png" hidden>
                </div>
                <input type="file" id="ai_image_input" accept="image/*" hidden>

                    

                <textarea id="send_textarea" placeholder="Type a message..." name="text"></textarea>
                <div id="send_button_shell"><div id="loading_mes"></div><input id="send_button" type="button"></div>
            </form>
            <div id="online_status">
                <div id="online_status_indicator" class="online_status_indicator_offline"></div><div id="online_status_text">No connection...</div>
            </div>
            <div id="hordeInfo" class="hidden">
                <span id="hordeQueue"></span>
            </div>
            
        </div>
    </div>
    
    <div id="chara_cloud">
        <form id="characloud_search_form">
            <button id="characloud_search_button" type="submit">Search</button>
            <input id="characloud_search" name="q" autocomplete="off" type="text" class="text_pole" placeholder="Search characters...">
            <div id="characloud_status_button">
                <a href="https://boosty.to/tavernai" target="_blank">
                    <div id="characloud_status_button_content">
                        <div id="characloud_status_button_content_logo">
                            <img src="img/cloud_logo.png">
                            <div id="characloud_status_button_content_logo_counter"></div>
                            <div id="characloud_status_button_content_logo_line_container">
                                <div id="characloud_status_button_content_logo_line_fill"></div>

                            </div>

                        </div>
                        <div id="characloud_status_button_content_title">Cloud</div>

                    </div>
                </a>
            </div>
            <div id="characloud_version_button"></div> 
            <div id="characloud_profile_button">
                <div id="profile_button_is_not_login">Login / Registaration</div>
                <div id="profile_button_is_login"><img src="/img/user_card.png" class="icon"><div class="user_name">Humi</div></div>
            </div>
            <div id="characloud_upload_character_button">
                Upload Character
            </div>
            <div id="characloud_close_button">
                <img src="img/cross.png">
            </div>

        </form>
        <form id="form_characloud_upload_character"  action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display: none;">
            <input type="file" id="characloud_upload_character_file" accept="image/png, image/webp" name="avatar">
        </form>
        <div id="characloud_search_block">
            <button id="characloud_search_back_button" type="button"></button>
            <div id="characloud_search_result"></div>       
        </div>

        <div id="characloud_board">
            <div>
                <div class="menu_toggle nsfw_toggle_block" id="nsfw_toggle_block_board">
                    <div class="toggle_label">NSFW</div>
                    <input id="show_nsfw" type="checkbox" class="toggle_checkbox">
                </div>
                <div id="header_categories">
                    
                </div>
            </div>
            <div id="characloud_characters"></div>
        </div>
        <div class="characloud_content">
            <div class="characloud_header">
                <div id="characloud_header_navigator"><h2 id="characloud_header_navigator_p1">TavernAI</h2><h2 id="characloud_header_navigator_c1">&nbsp;&gt;&nbsp;</h2><h2 id="characloud_header_navigator_p2"></h2><h2 id="characloud_header_navigator_c2">&nbsp;&gt;&nbsp;</h2><h2 id="characloud_header_navigator_p3"></h2> <!--&gt; Publishing Character--></div>
            </div>
            <div id="characloud_character_page">
                <div class="characloud_character_page_avatar">
                    <img src="../img/fluffy.png" width="400" height="600">
                    <div class="avatar-info">
                        <p id="avatar-info-name"></p>
                        <p id="avatar-info-author"></p>
                        <p id="avatar-info-filesize"></p>
                        <p id="avatar-info-creation-date"></p>

                    </div>
                    <form id="form_characloud_upload_character_page"  action="javascript:void(null);" method="post" enctype="multipart/form-data">
                        <input type="file" id="characloud_upload_character_page_avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/webp" name="avatar">
                    </form>
                </div>

                <div id="characloud_character_page_info">

                    <div class="characloud_character_page_buttons">
                        <div class="url-data" style="float:left"></div>
                        <button class="publish_button">⏏ Publish</button><img class="load_icon load_icon_publish" src="img/load.svg">
                        <button class="update_button">⏏ Update</button><img class="load_icon load_icon_update" src="img/load.svg">
                        <button class="load_update_button">Load Update &#9668;</button>
                        <button class="to_chat_button">To Chat</button>
                        <button class="update_locally_button">Save ➧</button>
                        <button class="add_locally_button">Add &#9654;</button>

                        <!--<button>Upload</button>-->
                        <div class="publish_rules"><a href="https://tavernai.net/app/rulers.html" target="_blank">Publication Rules (?)</a></div>
                    </div>

                    <div class="characloud_character_page_top_info"></div>
                    <div class="character-info">

                        <div class="info-section">
                            <label for="name-input">Name</label>
                            <input type="text" id="name-input" placeholder="The character's name" />
                        </div>
                        <div class="category-form">
                            <div class="menu_toggle nsfw_toggle_block" id="nsfw_toggle_block_editor">
                                <div class="toggle_label">NSFW</div>
                                <input id="editor_nsfw" type="checkbox" class="toggle_checkbox">
                            </div>
                            <div class="category-input">
                                <input type="text" id="category-input-field" placeholder="Enter a category">
                            </div>
                            <div class="category-list">
                                <!--<div class="category character-category">Responsive design <span class="category-remove">x</span></div>-->
                            </div>
                            <div class="popular-categories">
                                <div class="popular-categories-title">Popular categories</div>
                                <div class="popular-categories-list">
                                    <div class="category popular-category">+ Anime</div>
                                    <div class="category popular-category">+ Manga</div>
                                    <div class="category popular-category">+ Games</div>
                                    <div class="category popular-category">+ NSFW</div>
                                </div>
                            </div>
                        </div>
                        <div class="info-section">
                            <label for="short-description-input">Short Description</label>
                            <input type="text" id="short-description-input" placeholder="Displayed under the character's avatar" />
                        </div>
                        <div class="info-section">
                            <label for="personality-summary-input">Personality Summary</label>
                            <input type="text" id="personality-summary-input" placeholder="A brief description of the character's personality traits" />
                        </div>
                        <div class="info-section">
                            <label for="scenario-textarea">Scenario</label>
                            <textarea id="scenario-textarea" class="characloud_character" placeholder="Enter a situation in which the character is involved"></textarea>
                        </div>
                        <div class="info-section">
                            <label for="description-textarea">Description</label>
                            <textarea id="description-textarea" class="characloud_character" placeholder="A detailed description of the character"></textarea>
                        </div>
                        <div class="info-section">
                            <label for="first-message-textarea">First Message</label>
                            <textarea id="first-message-textarea" class="characloud_character" placeholder="First message from character"></textarea>
                        </div>
                        <div class="info-section">
                            <label for="dialogues-example-textarea">Dialogues Example</label>
                            <textarea id="dialogues-example-textarea" class="characloud_character" placeholder="An example of the character's dialogue"></textarea>
                        </div>
                    </div>
                    <div class="characloud_character_page_buttons">
                        <button class="publish_button">⏏ Publish</button><img class="load_icon load_icon_publish" src="img/load.svg">
                        <button class="update_button">⏏ Update</button><img class="load_icon load_icon_update" src="img/load.svg">
                        <button class="load_update_button">Load Update &#9668;</button>
                        <button class="to_chat_button">To Chat</button>
                        <button class="update_locally_button">Save ➧</button>
                        <button class="add_locally_button">Add &#9654;</button>

                        <!--<button>Upload</button>-->
                    </div>
                    <div class="characloud_character_page_top_info"></div>
                </div>
            </div>


            <div id="characloud_user_profile_block">

                <div class="characloud_user_profile">
                    <div class="characloud_user_profile_avatar">
                        <img class="characloud_user_profile_avatar_img" src="../img/default_avatar.png">
                    </div>
                    <form id="form_user_profile_avatar"  action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display:none;">
                        <input type="file" id="form_user_profile_avatar_file" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/webp">         
                    </form>
                    <div id="user_profile_info">
                        <h2 class="username"><span class="username_text"></span><span class="star-icon"></span><span class="logout_container"><span class="logout">(Logout)</span></span></h2>
                        <p class="url-data"></p>
                        <div id="user_profile_info_this_user">
                            <button class="upload-avatar-button">Avatar</button>
                            <button style="margin-left: 1px" class="upload-character-button">Upload Character</button>
                        </div>
                        <div id="user_profile_info_other_user">
                            <button class="profile-button">Profile</button>
                        </div>
                    </div>
                </div>
                <div class="new-mod-character-gallery">
                    <h3 class="gallery-title">Moderation New</h3>
                    <div class="new-mod-character-gallery-content">

                    </div>
                </div>
                <div class="edit-mod-character-gallery">
                    <h3 class="gallery-title">Moderation Edit</h3>
                    <div class="edit-mod-character-gallery-content">

                    </div>
                </div>
                <div class="character-gallery">
                    <h3 class="character-gallery-title">Characters</h3>
                    <div class="character-gallery-content">

                    </div>
                    <div id="user_profile_navigation_page">
                        <button id="user_profile_prev_button">Prev</button>
                        <span id="user_profile_page_pagination"></span>
                        <button id="user_profile_next_button">Next</button>
                    </div>
                </div>

            </div>
            <div id="characloud_category">
                <div id="characloud_category_characters">
                    
                </div>
                <div id="category_navigation_page">
                    <button id="category_prev_button">Prev</button>
                    <span id="category_page_pagination"></span>
                    <button id="category_next_button">Next</button>
                </div>
            </div>
            
            <div id="characloud_categories">
                <div class="categories-container">

                    <div class="categories-list">
                        <!-- categories will be added here -->
                    </div>
                    
                </div>
            </div>
        </div>
        <div id="characloud_bottom">
            <div id="characloud_bottom_block">
                <div><div style="margin-top: 14px;display: flex; justify-content: center;"><a href="https://discord.gg/zmK2gmr45t" target="_blank">Discord</a><a href="https://github.com/TavernAI/TavernAI" target="_blank">GitHub</a><a href="https://boosty.to/tavernai" target="_blank">Donation</a>
                    </div><div style="margin-top: 11px;opacity:0.15; display: flex; justify-content: center; font-size: 10px;">All characters 18+. The administration is not responsible for the content uploaded by users</div></div>
            </div>
            
        </div>
    </div>
</body>
</html>
